<template>
  <div class="m-launch-detail">
    <div class="m-goods-info">
      <div class="m-title">
        <p>拼单信息</p>
      </div>
      <div class="m-f1">
        <div class="m-launch-info">
          <div class="m-status">
            <div class="icon">
              <img src="../../assets/dingdanzhuantai.png" alt="">
            </div>
            <div class="incon-status" v-if="goodsInfo.ruleStatus == 0">拼单状态：待审核</div>
            <div class="incon-status" v-if="goodsInfo.ruleStatus == -1">拼单状态：审核未通过</div>
            <div class="incon-status" v-if="goodsInfo.ruleStatus == 4">拼单状态：拼单中</div>
            <div class="incon-status" v-if="goodsInfo.ruleStatus == 6">拼单状态：已取消</div>
            <div class="incon-status" v-if="goodsInfo.ruleStatus == 5 && goodsInfo.isAlready == 1">拼单状态：拼单成功</div>
            <div class="incon-status" v-if="goodsInfo.ruleStatus == 5 && goodsInfo.isAlready == -1">拼单状态：拼单失败</div>
          </div>
          <div class="m-info">
            <span>拼单结束时间：{{goodsInfo.fightGoodsEndTime}}</span>
            <span>拼单总发货量：{{goodsInfo.crowdfundingCount || 0}}件</span>
            <span>拼单已拼量：{{goodsInfo.checkOutCount || 0}}件</span>
            <span>商品类型：{{goodsInfo.supplyMode | supplyMode}}</span>
            <!-- <span>拼单编号：1287677672</span> -->
            <!-- <span class="t-under">查看所有子订单</span> -->
          </div>
        </div>
        <div>
          <w-mange-title title="拼单参数"></w-mange-title>
          <div class="SKU">
            <table class="table">
              <thead>
                <th>颜色</th><th>颜色最低发货量</th><th>尺码</th><th>采购商最低起订量</th><th>颜色已拼发货量</th><th v-if="goodsInfo.supplyMode == '1'">商品数量</th>
              </thead>
              <!-- SKU组合 -->
              <sku-group v-for="(sku, index) in goodsGsp" :key="index" :goods-type="goodsInfo.supplyMode" :specs="sku" :readonly="goodsInfo.ruleStatus != -1" :already="already" :count="true"></sku-group>
            </table>
          </div>  
        </div>
      </div>
    </div>

    <div class="m-goods">
      <w-table :columns="columns">
        <tr>
          <td>
            <div class="goods-info clearfix">
              <div class="goods-img fl">
                <img v-lazy="goodsInfo.goodsMainPhotoPath" alt="">
              </div>
              <div class="goods-name fl">
                <p class="p-line-hide">{{goodsInfo.goodsName}}</p>
                <span>货号：{{goodsInfo.goodsSerial}}</span>
              </div>
            </div>
          </td>
          <td>
            <span>{{goodsInfo.tierdPrice | goodsPrice}}</span>
            <br>
            <span>（出厂价：¥{{goodsInfo.outFactoryPrice || 0 | currency}}）</span>
          </td>
          <td>
            <span>{{goodsInfo.supplyMode == '1' ? goodsInfo.goodsInventory : '无'}}</span>
          </td>
          <td>
            <span>{{goodsInfo.gcName}}</span>
          </td>
        </tr>
      </w-table>
    </div>
  </div>
</template>

<script>
import SkuGroup from './components/SkuGroup'
import { apiGoodsMange } from 'js/api'

export default {
  data() {
    return {
      columns: [
        {title: '商品', width: '40%'},
        {title: '价格', width: '20%'},
        {title: '库存', width: 'auto'},
        {title: '分类', width: 'auto'}
      ],
      already: true, // 展示颜色已拼发货量
      params: {
        accessToken: this.$store.getters.token || '',
        threeMenuCode: this.$route.query.three || '',
        id: this.$route.query.goodsid || '',
        ruleStatus: this.$route.query.status || '',
        goodsRuleId: this.$route.query.ruleid || ''
      },
      goodsInfo: [],
      goodsGsp: []
    }
  },
  components: {
    'sku-group': SkuGroup
  },
  created() {
    if (!this.$route.query.goodsid) {
      this.$toast('该商品拼单规则数据错误')
      return
    }
    apiGoodsMange.apiLaunchGoods(this.params).then(data => {
      this.goodsInfo = data.data.goodsRulesList[0] || []
      this.goodsGsp = JSON.parse(this.goodsInfo.goodsGsp || '[]')
    })
  }
}
</script>

<style lang="scss">
.m-launch-detail {
  .table {
    td {
      border: 1px solid #e0e0e0;
    }
  }
}
</style>


<style lang="scss" scoped>
@import '../../scss/_var.scss';
.m-launch-detail {
  margin-bottom: 30px;
}
.t-under {
  text-decoration: underline;
  margin-right: 18px;
  font-size: 12px;
  color: #3693FF;
  cursor: pointer;
}
.m-goods-info {
  width: 100%;
  margin: 30px 0 20px;
  border: 1px solid $border-main;
  .m-title {
    text-align: center;
    line-height: 40px;
    font-size:16px;
    font-weight: 600;
    background:rgba(242,242,242,1);
  }
  .icon {
    width:36px;
    height:36px; 
    display: inline-block;
    margin-right: 20px;
  }
  .incon-status {
    display: inline-block;
    line-height: 40px;
    vertical-align: text-bottom;
    font-size: 16px;
    font-weight: 600;
  }
  .m-info {
    margin-left: 60px;
    span {
      // width: 25%;
      display: inline-block;
      padding-right: 5%;
    }
  }
}
.m-f1 {
  padding: 20px 30px;
}
.m-goods {
  .goods-info {
    padding: 10px;
  }
  .goods-img {
    width: 88px;
    height: 88px;
    margin-right: 14px;
  }
  .goods-name {
    display: inline-block;
    position: relative;
    height: 88px;
    width: 60%;
    span {
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }
}
</style>

